import React, {Component} from "react";
import {HomeWrapper} from '@/component/Home/style';
import {connect} from "react-redux";
import _ from 'lodash';
import {actions} from './store';
import PageDetailHeader from "./pageHeader";
import {getPageDetail} from "@/util/Api";
import BraftEditor from "braft-editor";
import NoDataWindow from "@/common/window/NoDataWindow";
import {Avatar, Col, Divider, Image, Row, Tag} from "antd";
import {RelevantGameInnerBox, RelevantGameOutBox} from "@/common/container/pageContainer/style";
import {HeadBackgroundImage} from "@/common/container/gameContainer/style";
import {toBase64} from "@/util/CodeUtils";
import JComment from "@/common/Comment";
import {addComment, getPageComment} from "@/api/ArtPageComment";
import {getQueryVariable, successMsg} from "@/util/global";
import {Blue, FontBackgroundColor, Pink} from "@/style/Color";

class PageContainer extends Component {
    constructor(props) {
        super(props);
        this.saveComment = this.saveComment.bind(this);
        this.getCommentList = this.getCommentList.bind(this);
        this.replyComment = this.replyComment.bind(this);

        /* 判断不未空再请求信息 */
        this.state = {
            Html: '',
            pageId: '',
            isRecommend: false,
            pageDetail: this.props.pageDetail,
            relevantGames: [],
            comment: []
        }

    }

    replyComment(value,reloadFunc) {
        let data = {
            ...value,
            pageId: this.state.pageId
        }
        addComment(data).then(res => {
            if (res.success) {
                successMsg("发布成功!");
                reloadFunc();
            }
        })
    }

    /* 发布评论 */
    saveComment(value,reloadFunc) {
        let data = {
            ...value,
            pageId: this.state.pageId
        }
        addComment(data).then(res => {
            if (res.success) {
                successMsg("发布成功!");
                reloadFunc();
            }
        })
    }

    getCommentList(value) {
        let data = {
            pageId: this.state.pageId,
            page: value.page,
            size: value.size,
        };
        getPageComment(data).then(res => {
            if (res.success) {
                this.setState({
                    comment: res.data
                })
            }
        })
    }

    componentDidMount() {
        /* 获取路径参数 */
        let pageId = null,
            isRecommend = null;

        try {
            pageId = getQueryVariable('pid');
        } catch (e) {
            window._ROUTER_.push("/")
        }
        if (!_.isEmpty(pageId)) {
            // this.props.initPageId(pageId);
            getPageDetail(pageId).then(res => {
                if (res.success) {
                    this.setState({
                        pageDetail: res.data,
                        Html: BraftEditor.createEditorState(res.data.pageContent).toHTML(),
                        pageId,
                        isRecommend,
                        relevantGames: res.data.relevantGames
                    })
                }
            });
        }
    }


    /* 离开页面前，执行钩子函数，清空文章详情 */
    componentWillUnmount() {
        this.props.clearOldPageDetail();
    }

    render() {
        return <>
            {
                this.state.pageId ?
                    <HomeWrapper style={{padding: '10px'}}>
                        <Row gutter={[16, 16]}>
                            <Col span={16} style={{backgroundColor: FontBackgroundColor, padding: '10px 0'}}>
                                <PageDetailHeader isRecommend={this.state.isRecommend}
                                                  data={this.state.pageDetail}/>
                                <div dangerouslySetInnerHTML={{__html: this.state.Html}}
                                     style={{padding: '10px 20px', lineHeight: '1.35'}} id={'document'}/>

                                {
                                    this.state.relevantGames.length > 0 ?
                                        <>
                                            <Divider orientation="left" className={'title'} style={{borderColor: Blue}}
                                                     plain>
                                                <span style={{color: Blue, fontWeight: 600}}>相关游戏</span>
                                            </Divider>
                                            <Row gutter={[8, 8]} style={{padding: '0 20px 10px 20px'}}>
                                                {
                                                    this.state.relevantGames.map(game => {
                                                        return <Col span={8} key={game.id}
                                                                    style={{cursor: 'pointer'}}
                                                                    onClick={() => window._ROUTER_.push(`/game?id=${toBase64(game.id)}`)}
                                                        >
                                                            <RelevantGameOutBox imageUrl={game.image}>
                                                                <HeadBackgroundImage/>
                                                            </RelevantGameOutBox>
                                                            <RelevantGameInnerBox>
                                                                <Row gutter={[16, 8]}>
                                                                    <Col span={8}>
                                                                        <Image src={game.image} width={80} height={78}
                                                                               preview={false}/>
                                                                    </Col>
                                                                    <Col span={16}>
                                                                        <p style={{fontSize: '14px'}}
                                                                           className={'title'}>{game.name}</p>
                                                                        <p style={{
                                                                            fontSize: '12px',
                                                                            letterSpacing: '0.5px'
                                                                        }}>
                                                                            <Avatar src={game.companyImage} size={20}/>
                                                                            <span
                                                                                style={{marginLeft: "5px"}}>{game.companyName}</span>
                                                                        </p>
                                                                        {
                                                                            (() => {
                                                                                let types = game.typeNames.split('/');
                                                                                return types.map(type => {
                                                                                    return <Tag color="default"
                                                                                                key={type} style={{
                                                                                        borderRadius: '10px',
                                                                                        marginLeft: '-3px',
                                                                                        marginRight: '0px',
                                                                                        transform: 'scale(0.9)'
                                                                                    }}>{type}</Tag>
                                                                                })
                                                                            })()
                                                                        }
                                                                    </Col>
                                                                </Row>
                                                            </RelevantGameInnerBox>
                                                        </Col>
                                                    })
                                                }
                                            </Row>
                                        </>
                                        :
                                        null
                                }
                                <Col span={24} style={{padding: '20px'}}>
                                    <Divider orientation="left" className={'title'} style={{borderColor: Pink}} plain>
                                        <span style={{color: Pink, fontWeight: 600}}>文章评论</span>
                                    </Divider>
                                    <JComment data={this.state.comment}
                                              onSave={this.saveComment}
                                              onLoad={this.getCommentList}
                                              onReply={this.replyComment}
                                    />
                                </Col>
                            </Col>
                            <Col span={7}>
                                123
                            </Col>
                        </Row>
                    </HomeWrapper>
                    :
                    <HomeWrapper>
                        <NoDataWindow/>
                    </HomeWrapper>
            }

        </>
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        initPageId(id) {
            dispatch(actions.upState_pageDetail_id(id));
            dispatch(actions.getPageDetailInfo());
        },
        clearOldPageDetail() {
            dispatch(actions.rmState_pageDetail_all());
        }
    }
}
export const pageDetail_mapStateToProps = (state) => {
    return {
        pageDetail: state.getIn(['pageDetail']).toJS()
    }
}

export default connect(pageDetail_mapStateToProps, mapDispatchToProps)(PageContainer);
